<template>
  <div class="table-page-container layout-padding">
    <el-card shadow="hover" class="layout-padding-auto">
      <div class="system-user-search mb15">
        <el-form ref="searchFormRef" :model="searchForm" inline>
          <el-form-item label="订单号" prop="order_no">
            <el-input v-model="searchForm.order_no" placeholder="请输入"> </el-input>
          </el-form-item>
          <el-form-item label="退款单号" prop="refund_no">
            <el-input v-model="searchForm.refund_no" placeholder="请输入" style="width: 160px">
            </el-input>
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <CommonSelect
              v-model="searchForm.status"
              style="width: 120px"
              :options="statusOptions"
              placeholder="请选择"
            >
            </CommonSelect>
          </el-form-item>
          <el-form-item>
            <el-button size="default" type="primary" @click="refresh">
              <el-icon>
                <ele-Search />
              </el-icon>
              查询
            </el-button>
            <el-button size="default" @click="onReset">
              <el-icon>
                <ele-RefreshRight />
              </el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        :data="tableData.list"
        v-loading="loading"
        element-loading-text="加载中"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="refund_no"
          label="退款单号"
          width="190"
          fixed="left"
        ></el-table-column>
        <el-table-column prop="order_no" label="订单号" width="190"></el-table-column>
        <el-table-column prop="amount_refund" label="退款金额" width="100">
          <template #default="{ row }">
            {{ row.amount_refund / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="amount_total" label="总金额" width="100" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.amount_total / 100 }}
          </template>
        </el-table-column>
        <el-table-column prop="transaction_id" label="交易号" width="260" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="success_time" label="成功时间" width="160" show-overflow-tooltip>
          <template #default="{ row }">
            {{ formatDate(row.success_time, 'time') }}
          </template>
        </el-table-column>
        <el-table-column
          prop="user_received_account"
          label="退款账户"
          width="150"
        >
        </el-table-column>
        <el-table-column prop="status" label="状态" width="110">
          <template #default="{ row }">
            <el-tag v-if="row.status === WepayRefundStatus.REFUNDING">退款中</el-tag>
            <el-tag v-else-if="row.status === WepayRefundStatus.CLOSED" type="warning"
              >已关闭</el-tag
            >
            <el-tag v-else-if="row.status === WepayRefundStatus.SUCCESS" type="success"
              >退款成功</el-tag
            >
            <el-tag v-else-if="row.status === WepayRefundStatus.ABNORMAL" type="error"
              >退款异常</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="创建时间"
          width="150"
          show-overflow-tooltip
        ></el-table-column>
        <el-table-column label="操作" width="140" fixed="right">
          <template #default="scope">
            <el-button
              v-if="
                scope.row.status === WepayRefundStatus.REFUNDING &&
                $can(ButtonPermission.UPDATE_REFUND_RECORD)
              "
              size="small"
              text
              type="primary"
              @click="handleQueryStatus(scope.row)"
              >更新状态</el-button
            >
            <el-button
              v-if="$can(ButtonPermission.DELETE_REFUND_RECORD)"
              size="small"
              text
              type="primary"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <CommonPagination :pagination="pagination" :total="tableData.total"></CommonPagination>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="refundRecord">
import { ref, reactive } from 'vue';
import { ElMessage, FormInstance } from 'element-plus';
import { readAllRefundRecord, deleteRefundRecord, queryRefundStatus } from '/@/api/refund-record';
import { useTable } from '/@/hooks/use-table';
import CommonPagination from '/@/components/common-pagination/index.vue';
import { ButtonPermission } from '/@/constants';
import CommonSelect from '/@/components/common-select/index.vue';
import { confirm } from '/@/utils/confirm';
import { WepayRefundStatus, WepayRefundStatusLabel } from '/@/constants/refund-status';
import { toOptions } from '/@/hooks/use-options';
import { formatDate } from '/@/utils';

const searchFormRef = ref<FormInstance>();
const searchForm = reactive({
  order_no: undefined,
  refund_no: undefined,
  status: undefined
});

const statusOptions = toOptions(WepayRefundStatusLabel);

const { tableData, loading, pagination, refresh, resetAndRefresh } = useTable<any>(
  ({ page, pageSize }) =>
    readAllRefundRecord({ page, pageSize, ...searchForm }).then(({ data }) => {
      return {
        total: data?.total,
        list: data?.list
      };
    })
);

const handleDelete = (row: any) => {
  confirm(async () => {
    await deleteRefundRecord(row.id);
    ElMessage.success('删除成功');
    refresh();
  });
};

const handleQueryStatus = async (row: any) => {
  await queryRefundStatus(row.id);
  refresh();
};

const onReset = () => {
  searchFormRef.value?.resetFields();
  resetAndRefresh();
};
</script>
